<!--
 * @Author: your name
 * @Date: 2022-04-13 10:23:18
 * @LastEditTime: 2022-04-13 21:42:09
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \blog-vue3\src\views\blog\column\Index.vue
-->
<template>
    <div class="main el-box-init el-bkgd-white el-pd-20">
        <!-- 操作按钮 -->
        <el-row class="table-btn el-pd-b-20">
            <el-button type="primary" v-if="isAuth('BLOG_COLUMN_ADD')" @click="onOpenWin('add')">
                <el-icon class="table-icon"><plus /></el-icon>
                新增
            </el-button>
            <el-button
                type="primary"
                v-if="isAuth('BLOG_COLUMN_UPDATE_SORT')"
                @click="onUpdateSort()"
            >
                <el-icon class="table-icon"><refresh /></el-icon>
                更新排序
            </el-button>
        </el-row>

        <!-- 表格列表 -->
        <el-table :data="list" border stripe :row-style="showTr" :row-key="getRowKeys">
            <el-table-column prop="title" label="标题" width="150">
                <template #default="scope">
                    <div class="name-and-icon" :class="'aname' + scope.row.level">
                        <span
                            class="icon"
                            v-if="toggleIconShow(0, scope.row)"
                            @click="toggle(scope.$index)"
                        >
                            <el-icon>
                                <minus v-show="scope.row.expanded" />
                                <plus v-show="!scope.row.expanded" />
                            </el-icon>
                        </span>
                        <span>
                            {{ scope.row.title }}
                        </span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="name" label="名称" width="100"></el-table-column>

            <el-table-column prop="path" label="路由URL" width="200"></el-table-column>

            <el-table-column prop="keyword" label="SEO关键词"></el-table-column>

            <el-table-column prop="desc" label="SEO描述"></el-table-column>

            <el-table-column prop="display" label="显示" width="100">
                <template #default="{ row }">
                    <el-switch
                        v-model="row.display"
                        :active-value="1"
                        :inactive-value="0"
                        @change="onColumnDisplay(row)"
                    />
                </template>
            </el-table-column>

            <el-table-column label="操作" :width="$maxActionWidth" align="center" fixed="right">
                <template #default="{ row }">
                    <el-button
                        v-if="isAuth('BLOG_COLUMN_ADD')"
                        @click="onOpenWin('addSub', row.id)"
                    >
                        <el-icon class="table-icon"><plus /></el-icon>
                        新增子类
                    </el-button>
                    <el-button
                        type="primary"
                        v-if="isAuth('BLOG_COLUMN_UPDATE')"
                        @click="onOpenWin('edit', row.id)"
                    >
                        <el-icon class="table-icon"><edit /></el-icon>
                        编辑
                    </el-button>
                    <el-button
                        type="danger"
                        v-if="isAuth('BLOG_COLUMN_DEL')"
                        @click="onDel(row.id)"
                    >
                        <el-icon class="table-icon"><delete /></el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增、编辑 -->
        <dialog-add-or-update ref="addRefs" :tableList="list"></dialog-add-or-update>
    </div>
</template>

<script>
import { getCurrentInstance, reactive, toRefs } from 'vue';
import { adminCloumn as Api } from 'api';
import { mixins } from '@/global/utils/mixins';
import DialogAddOrUpdate from './add-or-update.vue';

export default {
    mixins: [mixins],
    components: {
        DialogAddOrUpdate
    },
    setup() {
        const { proxy } = getCurrentInstance();
        // 表格
        let table = reactive({
            loading: false,
            rowId: 0,
            list: [],
            currentPage: proxy.$config.pagination.currentPage, // 默认页
            pageSize: proxy.$config.pagination.pageSize, // 每页多少条
            pageSizes: proxy.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
            layout: proxy.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
            total: 0 // 总条数
        });

        // 回显选过的列
        const getRowKeys = (row) => row.id;

        // 获取列表
        const getList = async () => {
            const { code, msg, data } = await proxy.$http.get(Api.getList);

            if (code === 200) {
                const oneMenuList = proxy.$utils.getCategory(data);
                const menuList = proxy.$utils.getChildrenTree(oneMenuList, oneMenuList[0]);
                const list = proxy.$utils.getTreeToArray(menuList, null, null, false); // 按可伸展处理分类

                list.forEach((item, index) => {
                    table.list[index] = item;
                });

                // 关闭加载提示
                table.loading = false;
            }
        };
        // 显示行
        const showTr = (data, index) => {
            let show = data.row.parent ? data.row.parent.expanded && data.row.parent.show : true;
            data.row.show = show;
            return show ? '' : 'display: none;';
        };
        // 点击展开和关闭的时候，图标的切换
        const toggleIconShow = (index, row) => {
            if (row.childrens && row.childrens.length > 0) {
                return true;
            }

            return false;
        };
        // 展开下级
        const toggle = (trIndex) => {
            let row = table.list[trIndex];
            row.expanded = !row.expanded;
        };
        // 获取当前编辑ID的所有父ID，更新表格根据得到的父ID展开，方便下次定位添加
        const getIdToPid = (list, pid) => {
            list.forEach((obj, index) => {
                if (obj.id == pid) {
                    this.toggle(index);

                    if (obj.childrens) {
                        this.getIdToPid(list, obj.pid);
                    }
                }
            });
        };
        // 栏目显示、隐藏
        const onColumnDisplay = async (row) => {
            const { code, msg, data } = await proxy.$http.post(Api.update, {
                id: row.id,
                display: row.display
            });

            if (code === 200) {
                proxy.$msg.success(row.display ? '成功显示' : '隐藏成功');
                getList();
            } else {
                proxy.$msg.error(msg ? msg : data);
            }
        };
        // 排序
        const onUpdateSort = async () => {
            const sortList = table.list.map((item, index) => ({
                id: item.id,
                sort: index + (table.currentPage - 1) * table.pageSize
            }));

            const { code, msg, data } = await proxy.$http.post(Api.onUpdateSort, {
                sortList: JSON.stringify(sortList)
            });

            if (code == 200) {
                proxy.$msg.success(msg);
            } else {
                proxy.$msg.error(msg ? msg : data);
            }
        };
        // 打开弹框组件
        const onOpenWin = (type, id) => {
            if (type == 'add') {
                proxy.$refs.addRefs.id = '';
            } else {
                proxy.$refs.addRefs.id = id;
            }

            proxy.$refs.addRefs.tableType = type;

            // 通过ref打开弹窗组件内开关
            proxy.$refs.addRefs.visible = true;
        };
        // 删除
        const onDel = async (id) => {
            const confirm = await proxy.$msgBox.confirm({
                cancel: true
            });

            if (confirm) {
                const { code, msg, data } = await proxy.$http.delete(Api.del, {
                    data: { id }
                });

                if (code === 200) {
                    proxy.$msg.success(msg);
                    getList();
                } else {
                    proxy.$msg.error(msg ? msg : data);
                }
            }
        };

        getList().then(() => {
            proxy.rowDrop();
        });

        return {
            ...toRefs(table),
            getList,
            showTr,
            toggleIconShow,
            toggle,
            getIdToPid,
            onColumnDisplay,
            onUpdateSort,
            onOpenWin,
            getRowKeys,
            onDel
        };
    }
};
</script>
